<template>
    <div class="wellcom">
        <h2><span>wellcom</span><i class="el-icon-more"></i></h2>
        <p>欢迎进入阈值控制页面,卷帘已打开</p>
        <p>
            <el-button
                :type="isActive == '在家' ? 'primary' : 'info'"
                @click="showFun"
                round
                >在家</el-button
            >
            <el-button
                :type="isActive == '睡眠' ? 'primary' : 'info'"
                @click="showFun"
                round
                >睡眠</el-button
            >
            <el-button
                :type="isActive == '外出' ? 'primary' : 'info'"
                @click="showFun"
                round
                >外出</el-button
            >
        </p>
    </div>
</template>

<script>
import eventBus from "@t/eventBus"
export default {
    data() {
        return {
            isActive: "在家",
        }
    },
    methods: {
        showFun(e) {
            this.isActive = e.target.innerText
        },
    },
    watch: {
        isActive(newVal) {
            if (newVal == "在家") {
                eventBus.$emit("dengOff")
            } else if (newVal == "睡眠") {
                eventBus.$emit("dengOn")
            } else if (newVal == '外出') {
                eventBus.$emit('turnOn')
            }
        },
    },
}
</script>

<style lang="less" scoped>
.wellcom {
    width: 1128px;
    height: 154px;
    background-color: #ffffff;
    box-sizing: border-box;
    margin: 0 auto;
    padding-top: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    h2 {
        font-size: 25px;
        font-weight: 700;
        color: #515d80;
        display: flex;
        justify-content: space-between;
        padding-left: 36px;
        padding-right: 40px;
        margin-bottom: 22px;
        .el-icon-more {
            font-size: 20px;
        }
    }
    p {
        font-size: 14px;
        color: #96a6b8;
        margin-left: 36px;
        margin-bottom: 22px;
        /deep/.el-button--primary {
            background-color: #1ecbb8;
        }
        /deep/.el-button--mini {
            font-size: 16px;
            font-weight: 550;
        }
    }
}
</style>